<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="icon" href="static/index/registe/imgs/yun.ico" type="image/x-icon"/>
    <title>qq用户绑定</title>
    <link rel="stylesheet" type="text/css" href="/static/index/restpass/qt-ui.css">
    <link href="static/index/registe/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/index/restpass/login_v714.css">
    <link href="static/index/registe/css/toastr.min.css" rel="stylesheet">
    <script src="static/index/registe/js/toastr.min.js"></script>
    <script type="text/javascript" src="/static/index/restpass/jQuery.js"></script>
    <style>        .notice {
        display: none;
    }

    .geetest_holder {
        width: 100% !important;
    }

    .img-code-a {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 8px;
        cursor: pointer;
        background-image: url('http://icon.58pic.com/revision/images/img-code-bg.png');
    }

    #sendcode-captcha {
        display: none;
    }
    </style>
    <script>        var stime = "1535098461";
    setInterval(function () {
        stime++;
    }, 1000);

    </script>
</head>
<body>
<div class="qt-header-other">
    <div class="w1200">
        <div class="qt-logo">
            <a href="{:url('index/index/index')}" title="云图网">
                <!--  <img src="static/index/restpass/imgs/logo.png" alt=""> -->
            </a>
        </div>
        <div class="qt-header-box clearfix">
            <div class="header-title fl">绑定手机</div>
        </div>
    </div>
</div>
<div class="setting-main">
    <div class="login-wrap">
        <div class="login-hearder"> qq用户绑定</div>
        <div class="login-content">
            <form action="{:url('index/registe/doqq')}" method="post" accept-charset="utf-8">
                <input type="hidden" name="openid" value="{$openid}">
                <div class="login-form">
                    <div class="input-inline">
                        <div class="input-icon i-phone"></div>
                        <input id="phone" type="text" maxlength="11"  name="phone" autocomplete="off" placeholder="请输入 11 位手机号" class=""
                               style="color: rgb(102, 102, 102);">
                        <span id="phonemsg" style="color:red"></p>
                    </div>
                    <div class="input-inline captcha">
                        <input id="captcha" type="text" name="telCode" maxlength="6" autocomplete="off" placeholder="请输入验证码" class="" style="color: rgb(102, 102, 102);">
                        <div class="btn-captcha  qt-btn  btn-green" id="send-btn">发送验证码</div>
                        <p class="warning-text"><span><i class="danger-icon"></i></span></p></div>
                    <div class="input-inline">
                        <div class="input-icon i-password"></div>
                        <input id="passwd" type="password" autocomplete="off"  name="pass" placeholder="请输入密码" class="" style="color: rgb(102, 102, 102);">
                        <span id="pwdmsg" style="color:red"></p>
                    </div>
                    <div class="input-inline">
                        <div class="input-icon i-password"></div>
                        <input id="passwd-new" type="password" autocomplete="off" name="newPass" placeholder="请确认密码" class="danger" style="color: rgb(102, 102, 102);">
                        <span id="newmsg" style="color:red"></p>
                    </div>
                    <button id="submit-phone"  class="login-submit qt-btn btn-green-linear statis">确认绑定</button>
                </div>
            </form>
        </div>
    </div>
    <div class="qt-footer-other"> Copyright &#169; 2018云图网 <a href="http://www.miitbeian.gov.cn/" target="_blank">沪ICP备10011451号-6</a>
    </div>
    <script>
        $(document).ready(function () {
            var timestamp = new Date().getTime();
            $(window).unload(function () {
                var site = 3;
                var timestampEnd = new Date().getTime();
                var time = parseInt((timestampEnd - timestamp) / 1000);
                if (document.referrer) {
                    var action = 'href';
                } else {
                    var action = 'quit';
                }
                $.getJSON("http://stats.58pic.com/58pic/index.php?m=staLogin&a=exitSta&action=" + action + "&site=" + site + "&time=" + time + "&callback=?", function () {
                });
            });

        });

        //失焦验证
        $(function(){
            //验证手机号码
            $('#phone').blur(function(){
                var phoneNumber = $(this).val();
                if(!phoneNumber){
                    $('#phonemsg').html('手机号不能为空');
                    return false;
                }else{
                    $('#phonemsg').html('');
                }
                var reg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
                if(!reg.test(phoneNumber)){
                    $('#phonemsg').html('手机号格式不正确');
                    return false;
                }else{
                    $('#phonemsg').html('');
                    $('.sub-btn').removeAttr('disabled');
                }
            });
            //验证密码
            $('#passwd').blur(function(){
                var passwd = $(this).val();
                var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
                if(!reg.test(passwd)){
                    $('#pwdmsg').html('密码格式不正确(6-12为数字字母)');
                    return false;
                }else{
                    $('#pwdmsg').html('');
                }

            });
            //验证密码是否一致
            $('#passwd-new').blur(function(){
                var newpwd = $(this).val();
                var passwd = $('#passwd').val();
                if (newpwd != passwd) {
                    $('#newmsg').html('两次密码不一致');
                    return false;
                }else{
                    $('#newmsg').html('');
                    $('#submit-phone').removeAttr('disabled');
                }

            });

            // 发送验证码
            $('#send-btn').click(function(){
                var phone = $('#phone').val();
                $.ajax({
                    type:'post',
                    url:'domsg',
                    data:{'phone':phone},
                    dataType:'json',
                    success:function(data){
                        if(data.status){
                            alert(data.info);
                        }else{
                            alert(data.info);
                        }
                    },
                    error:function(){
                        alert('验证码发送失败');
                    }
                });
            });
        });

    </script>
    <!--[if lte IE 6]>
    <script type="text/javascript" src="http://icon.qiantucdn.com/js/ie6png.js"></script>
    <script type="text/javascript">        DD_belatedPNG.fix('.header-logo, .png-fix');
    DD_belatedPNG.fix('.circle_act');
    </script><![endif]--></body>
</html>